<template>
    <div v-if="loading" class="loading-container">
      <Spinner size="large" />
    </div>
    
    <div v-else-if="movie" class="movie-detail-container">
      <div class="movie-header">
        <div class="movie-poster">
          <div class="poster-placeholder">
            <span>{{ movie.title.charAt(0) }}</span>
          </div>
        </div>
        <div class="movie-info">
          <h1>{{ movie.title }}</h1>
          <div class="meta-info">
            <span>{{ movie.year }}</span> • 
            <span>{{ movie.duration || '120分钟' }}</span> • 
            <span>{{ movie.rating || '8.5' }}</span>
          </div>
          <div class="genres">
            <span v-for="genre in movie.genres" :key="genre" class="genre-tag">
              {{ genre }}
            </span>
          </div>
          <div class="director">
            <strong>导演：</strong> {{ movie.director }}
          </div>
          <div class="cast">
            <strong>主演：</strong> {{ movie.cast || '约翰·史密斯, 简·多伊' }}
          </div>
        </div>
      </div>
      
      <div class="movie-description">
        <h2>剧情简介</h2>
        <p>{{ movie.description || '暂无剧情简介' }}</p>
      </div>
      
      <div class="comments-section">
        <h2>用户评论</h2>
        
        <div v-if="userStore.isLoggedIn" class="add-comment">
          <textarea 
            v-model="newComment" 
            placeholder="写下你的评论..." 
            rows="3"
          ></textarea>
          <button @click="submitComment" class="btn-comment">
            发表评论
          </button>
        </div>
        <div v-else class="login-prompt">
          <p>请<router-link to="/login">登录</router-link>后发表评论</p>
        </div>
        
        <div v-if="commentsLoading" class="comments-loading">
          <Spinner />
        </div>
        
        <div v-else>
          <div v-if="comments.length === 0" class="no-comments">
            <p>暂无评论，成为第一个评论的人吧！</p>
          </div>
          
          <div v-else>
            <MovieComment 
              v-for="comment in comments" 
              :key="comment.id" 
              :comment="comment" 
            />
          </div>
        </div>
      </div>
    </div>
    
    <div v-else class="not-found">
      <h2>电影未找到</h2>
      <router-link to="/" class="btn-back">返回首页</router-link>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import { getMovieById, getCommentsByMovieId, addComment } from '../api'
  import { useUserStore } from '../store/user'
  import MovieComment from '../components/MovieComment.vue'
  import Spinner from '../components/Spinner.vue'
  
  const route = useRoute()
  const userStore = useUserStore()
  const movie = ref<any>(null)
  const comments = ref<any[]>([])
  const newComment = ref('')
  const loading = ref(true)
  const commentsLoading = ref(true)
  const errorMessage = ref('')
  
  const movieId = computed(() => parseInt(route.params.id as string))
  
  onMounted(async () => {
    try {
      const movieResponse = await getMovieById(movieId.value)
      if (movieResponse.data.success) {
        movie.value = movieResponse.data.data
      } else {
        errorMessage.value = '获取电影详情失败'
      }
    } catch (error) {
      errorMessage.value = '获取电影详情失败，请稍后再试'
      console.error('Fetch movie error:', error)
    } finally {
      loading.value = false
    }
    
    fetchComments()
  })
  
  const fetchComments = async () => {
    try {
      commentsLoading.value = true
      const response = await getCommentsByMovieId(movieId.value)
      if (response.data.success) {
        comments.value = response.data.data
      }
    } catch (error) {
      console.error('Fetch comments error:', error)
    } finally {
      commentsLoading.value = false
    }
  }
  
  const submitComment = async () => {
    if (!newComment.value.trim()) return
    
    try {
      if (!userStore.isLoggedIn || !userStore.userInfo) {
        alert('请先登录')
        return
      }
      
      await addComment({
        content: newComment.value,
        movieId: movieId.value,
        userId: userStore.userInfo?.id ?? 0
      })
      
      newComment.value = ''
      fetchComments()
    } catch (error) {
      console.error('Add comment error:', error)
      alert('评论失败，请稍后再试')
    }
  }
  </script>
  
  <style scoped lang="scss">
  .movie-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
  }
  
  .movie-header {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }
  
  .movie-poster {
    flex: 0 0 300px;
  }
  
  .poster-placeholder {
    width: 100%;
    height: 450px;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 120px;
    font-weight: bold;
  }
  
  .movie-info {
    flex: 1;
    
    h1 {
      font-size: 36px;
      margin-bottom: 15px;
      color: #2c3e50;
    }
  }
  
  .meta-info {
    display: flex;
    gap: 15px;
    color: #7f8c8d;
    margin-bottom: 20px;
    font-size: 18px;
  }
  
  .genres {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
  }
  
  .genre-tag {
    background: #e0f7fa;
    color: #00838f;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 14px;
  }
  
  .director, .cast {
    margin-bottom: 15px;
    font-size: 18px;
    color: #555;
  }
  
  .movie-description {
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    
    h2 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #2c3e50;
      border-bottom: 2px solid #3498db;
      padding-bottom: 10px;
    }
    
    p {
      font-size: 18px;
      line-height: 1.8;
      color: #555;
    }
  }
  
  .comments-section {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    
    h2 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #2c3e50;
      border-bottom: 2px solid #3498db;
      padding-bottom: 10px;
    }
  }
  
  .add-comment {
    margin-bottom: 40px;
    
    textarea {
      width: 100%;
      padding: 15px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 16px;
      resize: vertical;
      min-height: 100px;
      margin-bottom: 15px;
      
      &:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
      }
    }
  }
  
  .btn-comment {
    background: linear-gradient(to right, #3498db, #2c3e50);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
  }
  
  .login-prompt {
    background: #e3f2fd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 30px;
    text-align: center;
    
    a {
      color: #3498db;
      font-weight: 500;
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .comments-loading, .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }
  
  .no-comments {
    text-align: center;
    padding: 30px;
    color: #7f8c8d;
    font-size: 18px;
  }
  
  .not-found {
    text-align: center;
    padding: 100px 20px;
    
    h2 {
      font-size: 32px;
      margin-bottom: 30px;
      color: #e74c3c;
    }
  }
  
  .btn-back {
    display: inline-block;
    background: #3498db;
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    
    &:hover {
      background: #2980b9;
      transform: translateY(-2px);
    }
  }
  
  @media (max-width: 992px) {
    .movie-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .movie-poster {
      flex: 0 0 auto;
      margin-bottom: 30px;
    }
    
    .genres {
      justify-content: center;
    }
  }
  
  @media (max-width: 576px) {
    .movie-header, .movie-description, .comments-section {
      padding: 20px;
    }
    
    .poster-placeholder {
      height: 350px;
      font-size: 80px;
    }
    
    h1 {
      font-size: 28px;
    }
  }
  </style>